<template>
	<view class="">
		<Note :noteInfo="noteInfo"></Note>
		<view class="banner-comp">
			<view class="banner">
				<swiper class="screen-swiper square-dot" :current="current" indicator-dots="false"  :autoplay="true" interval="5000" duration="500" @change="currentChange">
					<swiper-item class="swiper-item-li" v-for="(item, index) in swiperList" :key="index" @click="goProjectDetail(item)">
						<image v-if="item.adv_path" class="swiper-img" :src="item.adv_path" mode="aspectFill"></image>
						<text v-else class="swiper-no-img">暂无项目轮播图</text>
					</swiper-item>
				</swiper>
			</view>
			<image src="@/static/images/index/left-arrow.png" mode="widthFix" class="left-arrow-img" @click="swiperChange('left')"></image>
			<image src="@/static/images/index/right-arrow.png" mode="widthFix" class="right-arrow-img" @click="swiperChange('right')"></image>
		</view>
	</view>
</template>

<script>
import Note from "@/components/Note/Note.vue"
import { getBannerList } from "@/common/api/project.js"
export default {
	name: 'Banner',
	data() {
		return {
			noteInfo: '' , //主页公告
			current: 0,
			swiperList: [
				
			]
		};
	},
	mounted() {
		this.getBannerListFun()
	},
	onload() {
		this.getBannerListFun()
	},
	activated() {
		this.getBannerListFun()
	},
	methods:{
		getBannerListFun(){
			// getBannerList().then(res => {
			this.$api.advList({page:1,page_sie:10}).then(res => {
				if (res.code === 200) {
					let data = res.data
					this.swiperList = data.list
				}
			})
			getBannerList().then(res => {
				if (res.code === 200) {
					let data = res.data
					this.noteInfo = data.home_notice
				}
			})
		},
		// 跳转项目详情
		goProjectDetail(item) {
			// if (item.user_status) {
			// 	let projectData = {
			// 		project_id: item.project_id,
			// 		id: item.id,
			// 		title: item.title
			// 	}
			// 	// projectData = Base64.encode(JSON.stringify(projectData))
			// 	let projectDetail = JSON.stringify(projectData)
			// 	uni.setStorageSync('projectDetail', projectDetail)
			// 	uni.navigateTo({
			// 		url: `/pages/projectDetail/projectDetail`,
			// 	})
			// } else {
			// 	uni.showToast({
			// 		title: '对不起，该项目您未开通权限。',
			// 		icon: 'none',
			// 		duration: 1500
			// 	})
			// }
			if(item.hyperlink){
				this.$api.advClick({"adv_id": item.Id}).then(res => {
					if(res.code == 200){
						window.open(item.hyperlink)
					}
				})
				
			}
		},
		swiperChange(type){
			console.log(this.current)
			if (type === 'left') {
				if (this.current !== 0) {
					this.current--
				} else {
					this.current = this.swiperList.length - 1
				}
			} else {
				if (this.current !== this.swiperList.length - 1) {
					this.current++
				} else {
					this.current = 0
				}
			}
		},
		currentChange(e){
			this.current = e.detail.current
		}
		
	}
};
</script>

<style lang="scss" scoped>
/* banner */
.banner-comp{
	position: relative;
	// padding: 0 132px;
	height: 210px;
	width: $baseWidth;
	box-sizing: border-box;
	margin: 0 auto;
	overflow: hidden;
	.left-arrow-img{
		position: absolute;
		width: 14px;
		height: 26px;
		top: calc(50% - 13px);
		left: 24px;
		z-index: 2;
		cursor: pointer;
	}
	.right-arrow-img{
		position: absolute;
		width: 14px;
		height: 26px;
		top: calc(50% - 13px);
		right: 24px;
		z-index: 2;
		cursor: pointer;
	}
}
.banner {
	background: transparent;
	overflow: hidden;
	height: 210px;
	width: 100%;
	border-radius: 8px;
	.swiper-item-li{
		border-radius: 8px;
	}
	.screen-swiper{
		.uni-swiper-dot-active{
			width: 24px !important;
			height: 8px;
			background: #FFFFFF;
			border-radius: 4px;
		}
	}
	
	.screen-swiper {
		height: 100%;
		min-height: 100% !important;
		display: fe;
		.swiper-img {
			width: 100%;
			height: 210px;
			border-radius: 8px;
			cursor: pointer;
		}
		.swiper-item-li{
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #F0F2F5;
		}
		.swiper-no-img{
			font-size: 14px;
			color: #ccc;
		}
	}
}
@media screen and (min-width: 0px) and (max-width:1024px){
	.banner-comp{
		padding: 0 20px;
		height: 124px;
		width: 100%;
		.left-arrow-img{
			display: none;
		}
		.right-arrow-img{
			display: none;
		}
		.banner {
			height: 124px;
			border-radius: 8px;
			.swiper-img {
				width: 100%;
				height: 124px;
				border-radius: 8px;
				cursor: pointer;
			}
		}
	}
}
</style>
